<template>
  <view class="article-detail-page">
    <image
      v-if="menuType !== 8"
      class="article-detail-img"
      :src="formatImgUrl(info.coverImgUrl)"
      mode="aspectFill"
    />
    <!-- 茶赛事2 -->
    <ActivityDetailCard
      v-if="menuType === 2"
      :info="info"
      @signUp="onSignUp"
    />
    <!-- 茶介绍1、茶山3、茶工艺7 -->
    <ArticleDetailCard
      v-else-if="[1, 3, 7].includes(menuType)"
      :info="info"
      @share="onShare"
    />
    <!-- 茶厂4、茶商5 -->
    <FactoryDetailCard
      v-else-if="[4, 5].includes(menuType)"
      :info="info"
    />
    <!-- TODO:茶价格8 -->
    <PriceTable
      v-if="menuType === 8"
      :list="teaPricesList"
    />

    <SignUpSuccessModal
      v-if="showSignUpSuccessModal"
      @close="onCloseSignUpSuccessModal"
    />
  </view>
</template>

<script>
  import { formatImgUrl } from '../../common/utils.js'
  import {
    selectresentationDataByIdAndType,
    browseArticle,
    shareArticle,
    signUp
  } from '../../api/article.js'
  import ActivityDetailCard from './components/ActivityDetailCard.vue'
  import ArticleDetailCard from './components/ArticleDetailCard.vue'
  import FactoryDetailCard from './components/FactoryDetailCard.vue'
  import SignUpSuccessModal from './components/SignUpSuccessModal.vue'
  import PriceTable from './components/PriceTable.vue'
  export default {
    name: 'TeaDetail',
    components: {
      ActivityDetailCard,
      ArticleDetailCard,
      FactoryDetailCard,
      SignUpSuccessModal,
      PriceTable
    },
    data() {
      return {
        info: {},
        id: '',
        menuType: 1,
        showSignUpSuccessModal: false,
        teaPricesList: [],
        openId: ''
      }
    },
    onLoad(options) {
      console.log('options: ', options)
      const { id, menuType, openId } = options
      this.id = Number(id)
      this.menuType = Number(menuType)
      this.openId = openId
      this.fetchDetail()
    },
    methods: {
      formatImgUrl,
      async fetchDetail() {
        try {
          const params = {
            id: this.id,
            menuType: this.menuType,
            openId: this.openId
          }
          const res = await selectresentationDataByIdAndType(params)
          await browseArticle({ id: this.id, menuType: this.menuType })
          let data = {}
          if (res.data && res.data.teaPricesList) {
            this.teaPricesList = res.data.teaPricesList
          }
          if (res.data && res.data.activity) {
            this.info = res.data.activity
          } else if (res.data && res.data.articleAnagement) {
            data = res.data.articleAnagement
            this.info = data
          }
        } catch (e) {
          console.log(e)
        }
      },
      onShare() {
        shareArticle({ id: this.id, menuType: this.menuType }).finally(
          (res) => {
            console.log(res)
          }
        )
      },
      onSignUp() {
        const user = uni.getStorageSync('user')
        const openId = user.openId
        signUp({ id: this.id, openId })
          .then(() => {
            this.showSignUpSuccessModal = true
          })
          .catch((e) => {
            console.log(e)
          })
      },
      onCloseSignUpSuccessModal() {
        this.showSignUpSuccessModal = false
        this.fetchDetail()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article-detail-page {
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 120rpx;
  }
  .article-detail-img {
    width: 100vw;
    height: 460rpx;
    border-radius: 0rpx 0rpx 60rpx 60rpx;
    object-fit: cover;
    display: block;
    background: #eee;
  }
</style>
